<extend name="Public/common"/>
<block name="othercss">
    <style>
        body {
            background-image: url(__PUBLIC__/phone/images/4-1-image.png);
            height: 266px;
            background-repeat: no-repeat;
            background-size: 100% 266px;
            background-color: rgb(248, 248, 248);
        }
        .header {
            color: #FFF;
            background: transparent;
            border: 0
        }
        .div_btn {
            color: rgb(214, 41, 59);
            font-size: 15px;
            background: url(__PUBLIC__/phone/images/4-2-kj.png) no-repeat;
            background-size: 151px 40px;
            height: 40px;
            line-height: 40px;
            width: 152px;
            margin-top: 12px;
        }
        .card_bg {
            height: 65px;
            line-height: 45px;
            margin: 0 14px;
            margin-top: 20px;
            background: #FFF;
            border-radius: 5px;
        }
        .card {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            padding: 10px 0;
        }
        .card_left {
            border-right: 1px solid rgb(248, 248, 248);
        }
        .card_left, .card_right {
            width: 49%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            line-height: 20px;
            text-align: center;
        }
        .card-icon-bg {
            padding: 0 39px;
            padding-top: 20px;
            margin-bottom: 26px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .card-icon-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .iconbg {
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .icon-img {
            width: 40px;
            height: 40px;
            text-align: center;
        }
        .card-new-bg {
            padding: 0 14px;
        }
        .card-new {
            background-image: url(__PUBLIC__/phone/images/4-5-image.png);
            height: 224px;
            background-repeat: no-repeat;
            background-size: 100% 224px;
            display: flex;
            flex-direction: column;
        }
        .card-new-head {
            padding: 11px 0;
            display: flex;
            flex-direction: row;
            justify-content: center;
        }
        .card-new-body {
            display: flex;
            flex-direction: row;
            overflow: hidden;
        }
        .a_btn {
            margin-top: 15px;
            line-height: 24px;
            background: rgb(209, 0, 21);
            width: 108px;
            color: #FFF;
            text-align: center;
            font-size: 11px;
            border-radius: 5px;
        }
        .url_icon {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: #F8F8F8;
            height: 148px;
        }
        .url_a {
            width: 100%;
            text-align: center;
            line-height: 53px;
            font-size: 16px;
            color: #616161;
        }
        .url_icon ul li {
            float: left;
            width: 25%;
            text-align: center;
        }
         .url_icon-icon{
            width:61px;
            height:61px;
        }
        .url_icon  p{
            margin-top: 14px;
            font-size:14px;
            color:#616161;
        }
    </style>
</block>
<block name="header">
    <div class="header">
        <div class="clearfix box">
            <a class="return" href="/Phone/Member/index"><i class="return-icon"
                                                            style="border-top:1px solid #FFF;border-left:1px solid #FFF;"></i></a>
            <h2>账户管理</h2>
        </div>
    </div>
</block>

<block name="body">
    <div class="container 50pt">
        <!-- 顶部提现部分 -->
        <div style="text-align: center;margin-top:30px;">
            <div style="color:#FFF;font-size:13px;">可提余额</div>
            <div style="color:#FFF;font-size:38px;font-weight: bold;margin-top: 11px;">{$ex_money}</div>
            <div><a href="" class="div_btn">立即提现</a></div>
        </div>

        <!-- 中间卡片部分 -->
        <div class="card_bg">
            <div class="card">
                <div class="card_left">
                    <span style="font-size:13px">{$ex_sub}</span>
                    <span style="font-size: 13px;color:rgba(0,0,0,0.6)">代理人数</span>
                </div>
                <div class="card_right">
                    <span style="font-size:13px">{$ex_level}</span>
                    <span style="font-size: 13px;color:rgba(0,0,0,0.6)">当前等级</span>
                </div>
            </div>
        </div>

        <!-- icon部分 -->
        <div class="card-icon-bg">

            <!-- 邀请好友 -->
            <a href="{:U('invitation')}">
                <div class="card-icon-item">
                    <div class="iconbg">
                        <image src="__PUBLIC__/phone/images/4-11.png" class="icon-img"></image>
                    </div>
                    <span style="font-size: 13px;color:rgb(83,83,83);line-height: 24px;">邀请好友</span>
                </div>
            </a>

            <!-- 开通收益 -->
            <a href="{:U('profitOpen')}">
                <div class="card-icon-item">
                    <div class="iconbg">
                        <image src="__PUBLIC__/phone/images/4-4icon.png" class="icon-img"></image>
                    </div>
                    <span style="font-size: 13px;color:rgb(83,83,83);line-height: 24px;">分享收益</span>
                </div>
            </a>

            <!-- 商品收益 -->
            <a href="{:U('profitGood')}">
                <div class="card-icon-item">
                    <div class="iconbg">
                        <image src="__PUBLIC__/phone/images/4-4-icon2.png" class="icon-img"></image>
                    </div>
                    <span style="font-size: 13px;color:rgb(83,83,83);line-height: 24px;">商品收益</span>
                </div>
            </a>

            <!-- 会员热榜 -->
            <a href="{:U('profitMember')}">
                <div class="card-icon-item">
                    <div class="iconbg">
                        <image src="__PUBLIC__/phone/images/4-4-icon3.png" class="icon-img"></image>
                    </div>
                    <span style="font-size: 13px;color:rgb(83,83,83);line-height: 24px;">会员热榜</span>
                </div>
            </a>
        </div>

        <!-- 今日热推部分 -->
        <div class="card-new-bg">
            <div class="card-new">
                <!-- 热推头部 -->
                <div class="card-new-head">
                    <image src="__PUBLIC__/phone/images/4-6-icon.png" style="width:22px;height:23px;"></image>
                    <span style="margin-left: 8px;color:rgb(254,190,6);font-weight: bold;">今日热推</span>
                </div>

                <!-- 热推内容 -->
                <div class="card-new-body">

                    <!-- 左侧商品图片 -->
                    <div style="padding: 5px;padding-left: 10px;">
                        <image src="{$good['picture']}" style="width: 200px;height: 120px"></image>
                    </div>

                    <!-- 右侧商品内容 -->
                    <div style="padding: 5px;">
                        <p style="margin-bottom: 5px;"><a href="{$share}">{$good['goods_name']}</a></p>
                        <p style="color:rgb(209,0,21);margin-bottom: 30px;">佣金:&nbsp;{$share_money} 元</p>
                        <p style="color:rgb(83,83,83);font-size: 11px;">
                            <image src=""></image>
                            已被分享 {$good['ex_share_num']} 次
                        </p>
                        <a class="a_btn" onclick="showmodel()">分享好友</a>

                        <div class="bdsharebuttonbox" data-tag="share_1" hidden>
                            <a class="bds_sqq" data-cmd="sqq" id="qq_share"></a>
                            <a class="bds_tsina" data-cmd="tsina" id="tsina_share"></a>
                            <a class="bds_weixin" data-cmd="weixin" id="weixin_share"></a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="footer">
    <div id="showmodel" style="display: none">

        <!--上层内容-->
        <div class="url_icon">
            <ul>
                <li>
                    <a onclick="weixin_share()">
                    <image  class="url_icon-icon" src="__PUBLIC__/phone/images/wx2.png"></image>
                    <p>分享微信</p>
                    </a>
                </li>
                <li>
                    <a onclick="qq_share()">
                    <image  class="url_icon-icon" src="__PUBLIC__/phone/images/qq2.png"></image>
                    <p>分享QQ</p>
                    </a>
                </li>
                <li>
                    <a onclick="copyUrl()">
                    <image  class="url_icon-icon" src="__PUBLIC__/phone/images/lj2.png"></image>
                    <p>复制链接</p>
                    </a>
                </li>
                <li>
                    <a onclick="tsina_share()">
                    <image  class="url_icon-icon" src="__PUBLIC__/phone/images/wb2.png"></image>
                    <p>分享微博</p>
                    </a>
                </li>
            </ul>
        </div>

        <a class="url_a" onclick="clert()">取消</a>
    </div>
</block>
<block name="otherjs">
    <script>
        var id = "{$good['goods_id']}";
        let index = '';
        let share_url = "{$share}";
        function qq_share() {
            layer.close(index);
            document.getElementById('qq_share').click();
        }
        function tsina_share() {
            layer.close(index);
            document.getElementById('tsina_share').click();
        }
        function weixin_share() {
            layer.close(index);
            document.getElementById('weixin_share').click();
        }
        function clert() {
            layer.close(index)
        }

        function copyUrl()
        {
            layer.close(index);
            var oInput = document.createElement('input');
            oInput.value = share_url;
            document.body.appendChild(oInput);
            oInput.select();
            document.execCommand("Copy");
            oInput.className = 'oInput';
            oInput.style.display='none';
            layer.msg('复制成功');
        }

        function showmodel() {
            index = layer.open({
                type: 1,
                title: false,
                content: $('#showmodel'),
                offset: 'rb',
                area: ['100%', '201px'],
            })
        }
        window._bd_share_config = {
            common : {
                bdText : "{$good['goods_name']}",
                bdDesc : '',
                bdUrl : "{$share}",
                bdPic : share_url,
                onAfterClick:function () {
                    $.get('/Phone/Extension/share_add',{id:id});
                }
            },
            share : [{
                "bdSize" : 16
            }],

            image : [{
                viewType : 'list',
                viewPos : 'top',
                viewColor : 'black',
                viewSize : '16',
                viewList : ['qzone','tsina','huaban','tqq','renren']
            }],
            selectShare : [{
                "bdselectMiniList" : ['qzone','tqq','kaixin001','bdxc','tqf']
            }]
        }
        with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?cdnversion='+~(-new Date()/36e5)];
    </script>

</block>